<template>
   <div id="button" >
       <div id="inside">
       <el-button round  id="s" class="title"  @click="homepage()">myhealth</el-button>
       <el-button round type="primary" class="title" icon="el-icon-milk-tea" @click="diet()">饮食</el-button>
       <el-button round type="success" class="title" icon="el-icon-basketball" @click="exercise()">BDI-II</el-button>
       <el-button round type="warning" class="title" icon="el-icon-service" @click="physiology()">SDS</el-button>
       </div>
   </div>
</template>

<script>
import router from "../router";

export default {
  name: "HomePage",
  setup() {
    const diet = ()=>{
      router.push('/diet')
    }

    const exercise = ()=>{
      router.push('/exercise')
    }

    const physiology = ()=>{
      router.push('/physiology')
    }
    const homepage = ()=>{
      router.push('/homepage')
    }

    return {
      diet,
      exercise,
      physiology,
      homepage,
    }
  }
}
</script>

<style scoped>
#s{
  font-family: "Comic Sans MS";
  font-weight: bold;
  font-size: 18px;
  color: rgb(179,197,135);
}
.title{
  background: none;
  border:none;
  margin-left: 70px;
  margin-top: 3px;
  font-weight: bold;
  color:cadetblue;
  font-size: 13px;
}
#button{
  position:fixed;
  left:0;
  top:0;
  z-index:999;
  width: 100%;
  height:45px;
  background: white;
  box-shadow: 1px 1px 4px lightgray;
}
#inside{
  margin-left: 7%;
}
</style>